<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>注册</title>
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  <link href="../../lib/layui/css/layui.css" rel="stylesheet">
  <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
  <link href="../../static/css/login.css" rel="stylesheet">
</head>

<body>
  <div class="login-container">
    <div class="login-left">
      <div class="pic">
        <img src="../../static/images/login-logo.png">
        <img src="../../static/images/login-pic.png">
      </div>
    </div>
    <div class="login-right">
      <div class="history">
        <a href="javascript:history.go(-1)"><i class="iconfont use-go-back"></i></a>
      </div>
      <div class="title">Reset <span>PASSWORD</span></div>
      <div class="switch-login">通过手机验证重置密码，或者通过<span lay-on="mailbox" data-test="phone">邮箱验证重置密码</span></div>
      <!--Form-->
      <form class="layui-form">
        <div class="demo-login-container">
          <!--********-->
        </div>
        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">确定</button>
      </form>
      <div class="rights">Copyright © www.AxureUX.com, All Rights Reserved.</div>
    </div>
  </div>
</body>

</html>

<script>
  layui.use(function () {
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var util = layui.util;

    // 自定义验证规则
    form.verify({
      // 确认密码
      confirmPassword: function (value, item) {
        var passwordValue = $('#reg-password').val();
        if (value !== passwordValue) {
          return '两次密码输入不一致';
        }
      }
    });

    // 自定义验证规则
    form.verify({
      email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '请输入正确的邮箱地址']  
    });

    layer.ready(function () {
      formFn()
    })

    function formFn(params) {
      var phone = `<div class="layui-form-item">
            <div class="text">手机号码</div>
            <div class="layui-input-wrap">
              <input type="tel" name="phone" placeholder="请输入手机号码" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号码" lay-affix="clear" class="layui-input layui-phone">
            </div>
          </div>
          <div class="layui-form-item">
            <div class="text">验证码</div>
            <div class="layui-input-wrap">
              <input type="tel" name="vercode" placeholder="请输入验证码" lay-verify="required" autocomplete="off" lay-reqtext="请输入验证码" class="layui-input">
              <button type="button" class="now" data-test="email" lay-on="get-vercode">获取验证码</button>
            </div>
          </div>`

      var mailbox = `<div class="layui-form-item">
            <div class="text">验证邮箱</div>
            <div class="layui-input-wrap">
              <input type="text" name="email" placeholder="请输入邮箱地址" lay-reqtext="请输入邮箱地址" lay-verify="required|email" autocomplete="off" class="layui-input layui-email">
            </div>
          </div>
          <div class="layui-form-item">
            <div class="text">验证码</div>
            <div class="layui-input-wrap">
              <input type="tel" name="vercode" placeholder="请输入验证码" lay-verify="required" autocomplete="off" lay-reqtext="请输入验证码" class="layui-input">
              <button type="button" class="now" data-test="email" lay-on="get-email">获取验证码</button>
            </div>
          </div>`
          
      var passwrd = `<div class="layui-form-item">
          <div class="text">新密码</div>
            <div class="layui-input-wrap">
              <input type="password" name="password" value="" lay-verify="required" placeholder="请输入设置6-20位登录密码" lay-reqtext="请输入设置6-20位登录密码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
            </div>
          </div>
          <div class="layui-form-item">
            <div class="text">确认新密码</div>
            <div class="layui-input-wrap">
              <input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword" placeholder="请再次输入设置6-20位登录密码" lay-reqtext="请再次输入设置6-20位登录密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
          </div>`

      if (params === 'phone') {
        $('.demo-login-container').html(`${mailbox}${passwrd}`)
      } else {
        $('.demo-login-container').html(`${phone}${passwrd}`)
      }
      form.render(); // 动态添加类别
    }

    // 提交事件
    form.on('submit(demo-reg)', function (data) {
      var field = data.field; // 获取表单字段值
      console.log(field)
      // 显示填写结果，仅作演示用
      layer.alert(JSON.stringify(field), {
        title: '当前填写的字段值'
      });

      return false; // 阻止默认 form 跳转
    });

    // 普通事件
    util.on('lay-on', {
      //切换邮箱
      "mailbox": function () {
        var test = $(this).attr("data-test")
        console.log(test)
        if (test === 'phone') {
          formFn('phone')
          $(this).html('手机验证重置密码').attr('data-test', 'mailbox')
        } else {
          formFn('mailbox')
          $(this).html('邮箱验证重置密码').attr('data-test', 'phone')
        }
      },
      // 手机获取验证码
      'get-vercode': function (obj) {
        var isvalid = form.validate('.layui-phone'); // 主动触发验证，v2.7.0 新增
        // 验证通过
        if (isvalid) {
          layer.msg('手机号规则验证通过');
          // 此处可继续书写「发送验证码」等后续逻辑
          // …
          countDown(obj)
        }
      },
      // 邮箱获取验证码
      'get-email': function (obj) {
        var isvalid = form.validate('.layui-email'); // 主动触发验证，v2.7.0 新增
        // 验证通过
        if (isvalid) {
          layer.msg('邮箱规则验证通过');
          // 此处可继续书写「发送验证码」等后续逻辑
          // …
          countDown(obj)
        }
      }
    })
    
    // 倒计时
    function countDown(obj) {
      var time = 60
      //消抖，防止用户多次点击发送短信按钮造成读秒过快情况
      obj.attr("disabled", "true");
      let interval = setInterval(() => {
        if (time == 0) {
          clearInterval(interval)
          obj.text("获取验证码");
          obj.removeAttr("disabled")
        } else {
          obj.text(`重新发新${time--}秒`)
        }
      }, 1000)
    }

  })
</script>